<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>设置支付密码</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="/css/student/bootstrap.min.css">
  <script type="text/javascript" src="/js/student/jquery.min.js"></script>
  <script type="text/javascript" src="/js/student/popper.min.js"></script>
  <script type="text/javascript" src="/js/student/bootstrap.min.js"></script>
  <style type="text/css">
	/* 密码样式 */
  	ul,li{
  		list-style: none;
  	}
	.password-div {
		text-align: center;
		font: 0;
	}
  	.password-div input{
  		width: 1px;
  		height: 1px;
  		opacity: 0;
  		border: 0;
  	}
  	.password-lable{
  		height: 40px;
  		clear: both;
		margin: 0px;
		margin-right: 30px;
		vertical-align: middle;
  	}
  	.password-lable li{
  		float: left;
  		width: 40px;
  		height: 40px;
  		line-height: 40px;
  		text-align: center;
  		border: 1px solid #dedede;
  		margin-left: -1px;
  	}
	
	/* 弹窗样式设置 */
	.modal {
		margin-top: 200px;
	}
	.modal-footer {
		justify-content: center;
	}
	#confirm {
		margin-right: 30px;
		margin-left: 10px;
	}
	#cancle {
		margin-left: 30px;
	}
  </style>
</head>
<body>

<div class="container">
  <!-- 按钮：用于打开支付框 -->
  <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    确认付款
  </button> -->
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h5 class="modal-title" style="margin-left: 150px;">请 设 置 支 付 密 码</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
			<div class="password-div">
				<label for="password" class="password-lable">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<input id="password" type="password" name="password" maxlength="6">
				</label>
			</div>
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" id="confirm">确认</button>
		  <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancle">取消</button>
        </div>
   
      </div>
    </div>
  </div>
  <script type="text/javascript">
            
	$(function(){
		//直接弹出模态框
		$('#myModal').modal('show')
      });
	
	$(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
		var number = 6;   //定义输入最大值
		var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
		var list = $(".password-div ul li");  //定义list是li
		for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
			if(pw[i]){
				$(list[i]).text("·");
			}else{
				$(list[i]).text("");
			};
		};
	});
	$(".password-div ul").click(function(){      
		$("input[name = 'password']").val("");
		$("#password").focus();
		$(".password-div ul li").text("");
	});
	
	$("#confirm").click(function(){
		$.ajax({
			url:"/userAction/setPwd",
			type:"post",
			data:{
				payPwd:$("#password").val()
			},
			success:function(result){
				alert(result);
				if(result.indexOf('成功') != -1){
					//关闭模态框
					$("#myModal").modal('hide');
					//重新加载本页
					location.reload();
				}
			}
		});
	});
   </script>
</div>
</body>
</html>